<template>
  <div class="official-contact-list-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>官网联系人</span>
        </div>
      </template>
      
      <el-table 
        :data="contactList" 
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
        :row-style="{ height: '60px' }"
        stripe
        border
        fit
      >
        <el-table-column prop="name" label="姓名" min-width="180">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" min-width="180">
          <template #default="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="需求描述" min-width="300">
          <template #default="scope">
            <span>{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" min-width="200">
          <template #default="scope">
            <span>{{ formatDateTime(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 联系人列表数据
const contactList = ref<any[]>([])

// 本地假数据（API 不可用时兜底展示）
const mockContacts = [
  {
    id: 'OC10001',
    name: '张三',
    phone: '13800138001',
    description: '咨询产品价格和功能',
    created_at: new Date(Date.now() - 3600 * 1000).toISOString()
  },
  {
    id: 'OC10002',
    name: '李四',
    phone: '13800138002',
    description: '预约演示',
    created_at: new Date(Date.now() - 2 * 3600 * 1000).toISOString()
  },
  {
    id: 'OC10003',
    name: '王五',
    phone: '13800138003',
    description: '了解技术方案和部署方式',
    created_at: new Date(Date.now() - 3 * 24 * 3600 * 1000).toISOString()
  },
  {
    id: 'OC10004',
    name: '赵六',
    phone: '13800138004',
    description: '寻找合作伙伴',
    created_at: new Date(Date.now() - 7 * 24 * 3600 * 1000).toISOString()
  },
  {
    id: 'OC10005',
    name: '钱七',
    phone: '13800138005',
    description: '询价并准备采购',
    created_at: new Date(Date.now() - 10 * 24 * 3600 * 1000).toISOString()
  }
]

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)

// 格式化时间
const formatDateTime = (ts?: string | null) => {
  if (!ts) return '-'
  try {
    // 替换空格为 'T' 以便 Date 解析部分字符串
    const normalized = ts.includes(' ') && !ts.includes('T') ? ts.replace(' ', 'T') : ts
    const d = new Date(normalized)
    if (Number.isNaN(d.getTime())) return ts
    const y = d.getFullYear()
    const m = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    const hh = String(d.getHours()).padStart(2, '0')
    const mm = String(d.getMinutes()).padStart(2, '0')
    const ss = String(d.getSeconds()).padStart(2, '0')
    return `${y}-${m}-${day} ${hh}:${mm}:${ss}`
  } catch (e) {
    return ts
  }
}

// 处理分页大小变化
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchContactList()
}

// 处理当前页变化
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchContactList()
}

// 获取联系人列表
  const fetchContactList = async () => {
    try {
      const params = {
        page: currentPage.value - 1, // 确保page从0开始
        size: pageSize.value
      }
      // 使用项目标准的API路径格式，与customer等其他模块保持一致
      const res = await axios.get('/official/list', { params })
      const list = res.data.data?.items || []
    contactList.value = list
    totalCount.value = Number(res.data.data?.total ?? list.length)
  } catch (error) {
    console.error('获取官网联系人列表失败:', error)
    // 使用本地模拟数据
    contactList.value = mockContacts
    totalCount.value = contactList.value.length
  }
}

// 初始化数据
const initData = () => {
  contactList.value = mockContacts
  totalCount.value = contactList.value.length
}

// 生命周期钩子：组件挂载时
onMounted(() => {
  // 调用API获取联系人列表数据
  fetchContactList()
})
</script>

<style scoped lang="scss">
.official-contact-list-container {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 表格样式优化
  .el-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    width: 100%;

    // 全屏时的表格优化
    @media (min-width: 1200px) {
      .el-table__body-wrapper {
        overflow-x: auto;
      }
    }

    // 确保表格内容不会过于拥挤
    .el-table__cell {
      padding: 12px 8px;
    }

    // 让表格撑满容器宽度
    .el-table__header-wrapper,
    .el-table__body-wrapper {
      width: 100%;
    }
 
     // 优化列宽分配
     .el-table__column {
       flex: 1;
     }

    // 响应式列宽优化
    @media (min-width: 1400px) {
      .el-table__body {
        width: 100%;
      }
      
      .el-table__cell {
        padding: 16px 12px;
      }
    }

    @media (min-width: 1600px) {
      .el-table__cell {
        padding: 18px 16px;
      }
    }

    // 确保表格容器撑满
    .el-table__inner-wrapper {
      width: 100% !important;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 4px;
  }
}
</style>